<template>
    <div>
        <div class="editBoxs">
            <!-- <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                :mode="mode" /> -->
            <Editor ref="refmsg" disabled style="min-height: 32px; overflow-y: hidden;border-radius: 4px;"
                v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, watch, onMounted, computed, shallowRef, ref } from 'vue'
import { SlateNode, IDomEditor } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import "@wangeditor/editor/dist/css/style.css";
interface Props {
    modelValue: string
    height?: number | string // 编辑器的高度
}
interface EmitEvent {
    (e: 'update:modelValue', params: string): void
}
const props = withDefaults(defineProps<Props>(), {
    height: '',
})
const emit = defineEmits<EmitEvent>()
const valueHtml = computed({
    get() {
        return props.modelValue
    },
    set(value: string) {
        emit('update:modelValue', value)
    }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = 'simple'
// 工具栏配置
const toolbarConfig = {
    toolbarKeys: [
        // "headerSelect",
        // "fontSize",
        // "fontFamily",
        // "lineHeight",
        // // "|",
        // "insertLink",
        "bold",
        // "underline",
        // "italic",
        // {
        //     key: "group-more-style",
        //     title: "更多",
        //     iconSvg: "<svg viewBox=\"0 0 1024 1024\">" +
        //         "<path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path>" +
        //         "<path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path>" +
        //         "<path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path>" +
        //         "</svg>",
        //     menuKeys: ["through", "code", "sup", "sub", "clearStyle"]
        // },
        "color",
        // "bgColor",
        // // "|",
        // "bulletedList",
        // "numberedList",
        // // "todo",
        // {
        //     key: "group-justify",
        //     iconSvg: "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
        //     title: "对齐",
        //     menuKeys: ["justifyLeft", "justifyRight", "justifyCenter", "justifyJustify"]
        // },
        // {
        //     key: "group-indent",
        //     title: "缩进",
        //     iconSvg: "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
        //     menuKeys: ["indent", "delIndent"]
        // },
        // 'clearStyle',
        // "|",
        // "emotion",
        // "insertTable",
        // "divider",
        // "|",
        // "undo",
        // "redo",
    ]
}
const editorConfig = ref<any>({
    placeholder: '请输入内容...',
    hoverbarKeys: {
        'text': {
            menuKeys: [
                // 'headerSelect',
                // 'insertLink',
                // 'bulletedList',
                // '|',
                // 'fontSize',
                // 'fontFamily',
                // 'lineHeight',
                'bold',
                // 'through',
                'color',
                // 'bgColor',
                // 'clearStyle',
            ], // 定义你想要的 menu keys
        }
    }
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const { value } = editorRef
    if (value === null) return
    value.destroy()
})
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    // if (props.disabled) {
    //     editorRef.value.disable()
    // }
}
const editorHight = ref<number>(0)
const refmsg = ref<any>(null)
const isSpread = ref(true)
const isShow = ref(false)
onMounted(() => {
    // setTimeout(() => {
    //     editorHight.value = refmsg.value.$el.clientHeight
    //     if (Number(editorHight.value) > Number(props.height)) {
    //         isSpread.value = true
    //         isShow.value = true
    //     } else {
    //         isSpread.value = false
    //         isShow.value = false
    //     }
    // }, 500)
})
</script>
<style lang="scss" scoped>
.editBoxs {
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #E3E3E3;
    position: relative;
}

.toggleBox {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #2C68FF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .el-icon {
        margin-left: 5px;
    }
}

// .editBoxs:hover {
//     border-radius: 4px;
//     border: 1px dashed #2C68FF;
//     background: #EEF6FF;
// }</style>
<style>
.w-e-text-container {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    position: inherit;
}

.w-e-text-container p {
    margin: 0px !important;
    height: 30px
}

.w-e-text-container span {
    line-height: 30px;
}

.w-e-text-placeholder {
    top: 5px;
    font-style: normal;
}

.w-e-bar-item {
    height: 30px;
}

.w-e-scroll {
    overflow: hidden !important;
}

.bg-white-box {
    margin-top: 0px !important;
}

p {
    margin: 7px 0;
}

.w-e-bar-item button {
    padding: 0 5px;
}

.w-e-hover-bar {
    left: 0px !important;
    top: -38px !important;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 3px 3px 3px 3px;
    border: none;
}
</style>